import React,{ Component } from 'react';
import {
	Modal,
	Typography,
	Select,
	Space,
	Table,
	Form
} from 'antd';
import { EditableRow,EditableCell } from '../EditTaleComponent';
import { groupFieldData,replaceField } from 'src/services/DataManage';
import { FormInstance } from 'antd/lib/form';


interface Iprops {
    modalVisibleValue:boolean
    FieldData:any
    modalVisible:any
    joinComponentFunc:any
}

class ReplaceFieldsBack extends Component<Iprops> {

    formRef = React.createRef<FormInstance>()

    columns = [
    	{
    		title: 'name',
    		dataIndex: 'name',
    		editable: false,
    	},
    	{
    		title: 'content',
    		dataIndex: 'content',
    		editable: true,
    	},
    ]

    state = {
    	selectField: '',
    	dataSource: []
    }

    //关闭字段分组弹框
    handleCancle = () => {
    	this.setState( {
    		selectField: '',
    		dataSource: [],
    	} );
    	this.formRef.current.resetFields();
    	this.props.modalVisible( 'fieldReplaceVisible',false );
    }

    //提交
    handleSubmit = async () => {
    	let fields = this.state.dataSource.map( item => 
    		( {	'name': this.state.selectField, 'source': item.name, 'target': item.content } ) 
    	);
    	let d = { fields,	'modelId': this.props.FieldData.modelId, 'position': 1 };
    	const info = await replaceField( { data: d } );
    	if ( info.data.success ) {
    		const data = info.data.data;
    		let toData = { ...data,
    			nodeType: 'fieldEmpty',
    			style: { 'primaryColor': '#0066FF' },
    			shape: 'SimplicityNode' };
    		this.props.joinComponentFunc( this.props.FieldData,toData,{} );
    		this.handleCancle();
    	}

    }

    fieldChange = async value => {
    	const { id,modelId } = this.props.FieldData;
    	const info = await groupFieldData( { data: { 'componentId': id, 'field': value, 'modelId': modelId } } );
    	if( info.data.success ) {
    		const data = info.data.data;
    		this.setState( {
    			selectField: value,
    			dataSource: data.map( ( item,index ) => {
    				return{
    					key: index,
    					name: item,
    					content: item,
    			};
    			} )
    		} );
    	}
    }

    handleSave = row => {
    	const newData = [ ...this.state.dataSource ];
    	const index = newData.findIndex( item => row.key === item.key );
    	const item = newData[index];
    	newData.splice( index, 1, {
    		...item,
    		...row,
    	} );
    	this.setState( { dataSource: newData } );
    };


    render() {
    	const { dataSource } = this.state;

    	const components = {
    		body: {
    			row: EditableRow,
    			cell: EditableCell,
    		},
    	};

    	const columns = this.columns.map( col => {
    		if ( !col.editable ) {
    			return col;
    		}
    		return {
    			...col,
    			onCell: record => ( {
    				record,
    				editable: col.editable,
    				dataIndex: col.dataIndex,
    				title: col.title,
    				handleSave: this.handleSave,
    			} ),
    		};
    	} );

    	return (
    		<>
    			<Modal title={'字段内容替换'}
    				onCancel={this.handleCancle}
    				onOk={this.handleSubmit}
    				visible={this.props.modalVisibleValue}
    				okText={'确定'}
    				cancelText={'取消'}>
    				<Space direction={'vertical'} size={'middle'}>
    					<Space direction={'vertical'}>
    						<Typography>选择需要替换内容的字段</Typography>
    						<Form ref={this.formRef}>
    							<Form.Item noStyle={true} name={'select'}>
    								<Select style={{ width: '180px' }} defaultValue={null} onChange={this.fieldChange}>
    									{
    										this.props.FieldData.model.fieldMappings.map(
    											( i,index ) => (
    												// 'i.tempFieldName}'
    												<Select.Option key={index} value={i.tempFieldName}>
    													{i.finalFieldDesc}
    												</Select.Option>
    											)
    										)
    									}
    								</Select>
    							</Form.Item>
    						</Form>
    					</Space>
    					<Table
    						pagination={false}
    						components={components}
    						rowClassName={() => 'editable-row'}
    						bordered
    						scroll={{ y: 500 }}
    						dataSource={dataSource}
    						columns={columns}
    					/>
    				</Space>
    			</Modal>
    		</>
    	);
    }
}

export default ReplaceFieldsBack ;